<template>
    <div>
        <el-tabs type="border-card" value="1">
            <el-tab-pane label="历程信息">
                <template>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column label="序号" width="120">
                            <template slot-scope="scope">
                                <span class="num">{{ scope.row.num }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="图片" width="150">
                            <template slot-scope="scope">
                                <img :src="scope.row.img" alt="" class="img">
                            </template>
                        </el-table-column>
                        <el-table-column label="年限" width="180">
                            <template slot-scope="scope">
                                <div>{{ scope.row.date }}</div>
                                <div class="time"><span></span>{{ scope.row.time }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="文字内容" width="300">
                            <template slot-scope="scope">
                                <span>{{ scope.row.content }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="公司介绍" width="650">
                            <template slot-scope="scope">
                                <span class="lyNum">{{ scope.row.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleTop(scope.$index, scope.row)">置顶</el-button>
                                <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class="page">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="新增历程">
                <div class="wrap">
                    <div class="oneLine">
                        <div class="editTitle">
                            <div class="txt">编辑标题</div>
                            <input type="text" placeholder="请输入新闻标题" v-model="newsTitle">
                        </div>
                        <div class="newsType">
                            <div class="title">状态</div>
                            <div class="typeChoose">
                                <template>
                                    <el-radio-group v-model="radio">
                                        <el-radio label="公司新闻">公司新闻</el-radio>
                                        <el-radio label="行业新闻">行业新闻</el-radio>
                                    </el-radio-group>
                                </template>
                            </div>
                        </div>
                        <div class="chooseTime">
                            <div class="title">时间</div>
                            <el-time-select
                                v-model="value1"
                                :picker-options="{
                                    start: '08:30',
                                    step: '00:15',
                                    end: '18:30'
                                }"
                                placeholder="请选择时间">
                            </el-time-select>
                        </div>
                        <div class="sort">
                            <div class="title">排序</div>
                            <el-time-select
                                v-model="value2"
                                :picker-options="{
                                    start: '08:30',
                                    step: '00:15',
                                    end: '18:30'
                                }"
                                placeholder="请选择序号">
                            </el-time-select>
                        </div>
                        <div class="upload">
                            <div class="txt">上传封面</div>
                            <div class="loadBox">
                                <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                        </div>
                    </div>
                    <div class="twoLine">
                        <div class="title">编辑内容</div>
                        <textarea class="editContent" placeholder="请输入历程内容" v-model="areaTxt"></textarea>
                    </div>
                    <div class="btnBox">
                        <el-button>预览</el-button>
                        <el-button type="primary" @click="up">提交</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {get,post} from '../../request/http'
export default ({
    data() {
        return {
            tableData: [
                {
                    num: '01',
                    img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain',
                    date: '2024年11月27日',
                    time:'14:00',
                    content:"墨西哥总统辛鲍姆表示所谓中国产",
                    title:"墨西哥总统辛鲍姆表示所谓中国产品通过墨西哥进入美国和加拿大的说法不正确外交部回应"
                },
                {
                    num: '01',
                    img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain',
                    date: '2024年11月27日',
                    time:'14:00',
                    content:"墨西哥总统辛鲍姆表示所谓中国产",
                    title:"墨西哥总统辛鲍姆表示所谓中国产品通过墨西哥进入美国和加拿大的说法不正确外交部回应"
                },
                {
                    num: '01',
                    img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain',
                    date: '2024年11月27日',
                    time:'14:00',
                    content:"墨西哥总统辛鲍姆表示所谓中国产",
                    title:"墨西哥总统辛鲍姆表示所谓中国产品通过墨西哥进入美国和加拿大的说法不正确外交部回应"
                }
            ],
            radio: '公司新闻',
            value1:"",
            value2:"",
            areaTxt:"",
            imageUrl:"",
            newsTitle:""    
        }
    },
    methods: {
        handleTop(index, row) {
            console.log(index, row);
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            // const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = e => {
                // e.target.result就是Base64字符串
                console.log(e.target.result);
                // 这里可以将Base64字符串传递给其他方法或数据属性
            };
        },
        async up(){
            let res = await post('http://123.56.105.243:8080/admin/process',{
                "describe": this.areaTxt,
                "history": this.value,
                "id": 0,
                "pictureId": 0,
                "status": 0,
                "title": this.newsTitle
            })
            console.log(res);
            
        },
    },
    mounted(){
        this.aaaa()
    }
})
</script>
<style lang="scss">
.page{
    text-align: right;
    margin-top: 10px;
}
.el-table{
    font-size: 15px;
}
.img{
    width: 70px;
    height: 70px;
}
.num{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EFF1F8;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
}
.el-table .el-table__cell{
    padding: 12px 0;
}
.time{
    color: #3BB900;
    font-size: 13px;
    span{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #44D600;
        margin-right: 3px;
    }
}

.el-radio__input.is-checked .el-radio__inner{
    border-color: #3BB900;
    background: #3BB900;
}
.el-radio__input.is-checked+.el-radio__label{
    color: #3BB900;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 111px;
    height: 34px;
}
.el-input__inner{
    padding: 0;
    background: #F6F8FB;
    height: 100%;
}
.el-input__prefix{
    display: none;
}
.el-input--prefix .el-input__inner{
    padding-left: 20px;
}

.wrap{
    .oneLine{
        display: flex;
        justify-content: space-between;
        padding-right: 200px;
        padding-top: 10px;
        border-bottom: 2px solid #F6F8FB;
        padding-bottom: 26px;
        .editTitle{
            text-align: left;
            .txt{
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 21px;
            }
            input{
                width: 420px;
                height: 60px;
                padding-left: 20px;
                border: none;
                background: #F6F8FB;
                border-radius: 5px;
                outline: none;
                border: 1px solid #E0E8F4;
            }
        }
        .newsType{
            text-align: left;
            .title{
                font-size: 14px;
                margin-bottom: 41px;
            }
        }
        .chooseTime{
            .title{
                font-size: 14px;
                margin-bottom: 33px;
            }
            .btn{
                .el-button{
                    width: 70px;
                    height: 30px;
                    border: none;
                    padding: 0;
                    span{
                        font-size: 12px;
                    }
                }
                .el-button--primary{
                    background: #2567FF;
                }
                .el-button--default{
                    background: #EFF1F8;
                }
            }
        }
        .sort{
            .title{
                font-size: 14px;
                margin-bottom: 33px;
            }
            .btn{
                .el-button{
                    width: 70px;
                    height: 30px;
                    border: none;
                    padding: 0;
                    span{
                        font-size: 12px;
                    }
                }
                .el-button--primary{
                    background: #2567FF;
                }
                .el-button--default{
                    background: #EFF1F8;
                }
            }
        }
        .upload{
            .txt{
                margin-bottom: 16px;
                font-size: 13px;
            }
            .loadBox{
                .avatar-uploader{
                    background: #F6F8FB;
                     .avatar-uploader .el-upload {
                        border: 1px dashed #d9d9d9;
                        border-radius: 6px;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                    }
                    .avatar-uploader-icon {
                        font-size: 28px;
                        color: #8c939d;
                        width: 140px;
                        height: 70px;
                        line-height: 65px;
                        text-align: center;
                    }
                    .avatar {
                        width: 140px;
                        height: 70px;
                        display: block;
                    }
                }
            }
        }
    }
    .twoLine{
        padding-top: 25px;
        .title{
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: left;
        }
        .editContent{
            width: 100%;
            height: 200px;
            background: #F6F8FB;
            border: none;
            border-radius: 5px;
            outline: none;
            padding-top: 20px;
            padding-left: 20px;
        }
    }
    .btnBox{
        margin-top: 75px;
        .el-button{
            width: 120px;
            height: 40px;
            border: none;
            outline: none;
            padding: 0;
            font-size: 18px;
        }
        .el-button--default{
            background: #EFF1F8;
        }
        .el-button--primary{
            background: #2567FF;
        }
    }
}

</style>